<template>
  <a-card>
  <a-table bordered :data-source="dataSource" :columns="columns" :pagination="false">
    <template #bodyCell="{ column, text, record, index }">
      <template v-if="column.dataIndex === 'wayName'">
        <a-input v-model:value="record.wayName"
          @change="handleChange(index, 'name', $event.target.value, record)"></a-input>
      </template>
      <template v-if="column.dataIndex === 'condExp'">
        <a-input v-model:value="record.condExp" readonly @click="openModal(record)"></a-input>
      </template>
    </template>
  </a-table>
</a-card>
</template>
<script setup lang="tsx">
import { ref, reactive, computed, onMounted, h, watch, unref } from 'vue';
import type { UnwrapRef } from 'vue';
import modeler from '@/store/modules/modeler';
import { Element } from 'diagram-js/lib/model/Types';
import { useModal } from '@/hooks/useModal/useModal';
import { getNameValue, setNameValue } from '@/components/design/bo-utils/nameUtil';
import {getIdValue} from '@/components/design/bo-utils/idUtil';
import { cloneDeep } from 'lodash-es';
import GateWaySetting from '@/components/design/components//Panel/components/SubChild/GateWaySetting.vue';
import { connectionAttr } from '@/store/modules/connectionAttr';

const [ModalRender, modalRef] = useModal();
const modelerStore = modeler();
const connecitonAttrStore = connectionAttr();
const dataSource = ref<any>([]);
const active = computed<Element | null>(() => modelerStore.getActive!);
const outGoingWay = active.value.outgoing;
const editableData: UnwrapRef<Record<string, any>> = reactive({});
const columns = [
  {
    title: '节点名称',
    dataIndex: 'nodeName',
    width: '20%',
    rowDrag: true,
  },
  {
    title: '连接线名称',
    dataIndex: 'wayName',
    width: '40%',
  },
  {
    title: 'if条件设置',
    dataIndex: 'condExp',
    width: '40%',
  },
];
const editFormRef = ref<any>(null);
const editDrawerBindValue = reactive({
  defaultSelectData: [],
  runType: ''
});
//加载数据
const loadGateWaysInfo = () => {
  if (active.value?.businessObject.$type === "bpmn:SequenceFlow") {
    const wayInfo = {
      wayNo: active.value?.id,
      nodeName: active.value?.businessObject.targetRef.name,
      wayName: active.value?.businessObject.name === undefined ? '' : active.value?.businessObject.name,
      condExp: ''
    }
    dataSource.value.push(wayInfo);
  }
  else {
    dataSource.value = outGoingWay.map((way) => {
      return {
        wayNo: way.id,
        nodeName: way.businessObject.targetRef.name,
        wayName: way.businessObject.name === undefined ? '' : way.businessObject.name,
        condExp: '请点击设置条件。'
      }
    })
  }

  dataSource.value.forEach((way) => {
    console.log(way);
    var { hasVaule } = connecitonAttrStore.getConnectionByNo(way.wayNo);
    if (hasVaule)
      way.condExp = "点击请查看方向条件设置。";    
  });

}
loadGateWaysInfo();
const handleChange = (index, key, value, record) => {
  console.log(value, "outGoingWay22222");
  const newData = [...dataSource.value];
  newData[index][key] = value;
  dataSource.value = newData;
  const element = outGoingWay.filter((way) => way.id === record.wayNo)[0];
  console.log(element as Element);
  updateElementName(element, value);
};
//修改方向条件名称
const updateElementName = (element, value: string) => {
  setNameValue(element as Element, value); 
};
const onSubMit = async () => {
  return "novalue";
};
//上级父页面调用
defineExpose({
  handleSubmit: onSubMit,
});

//设置if条件表达式
const openModal = async (record) => {
  editDrawerBindValue.defaultSelectData = record.orgData;
  editDrawerBindValue.runType = "0";
  ModalRender.show({
    title: `${record?.id ? '编辑' : '设置'}方向条件`,
    width: '50%',
    // 是否显示右上角确定取消
    defaultExtra: true,
    destroyOnClose: true,
    content: () => {
      return <GateWaySetting connectionName={unref(record.wayName)} sequeid={unref(record.wayNo)} ref={editFormRef} ></GateWaySetting>;
    },
    // 确定方法执行
    onOk: async (values) => {
      //调用子页面的方法
      const res = await editFormRef.value?.handleSubmit();
      if (res === "hasvalue") {
        record.condExp = "点击请查看方向条件设置。";
      }
      else
        record.condExp = "请点击设置条件。";

      console.log(res);
      //if (!res) return;

    },
  });
};
</script>